<template>
    <div style="margin-top: 10%;text-align: center;">
        <div >
            转换前的链接<el-input v-model="url" placeholder="请输入内容" clearable style="width: 800px;"></el-input>
        </div>
        <div style="margin-top: 20px;">
            <el-button @click="short()">短链接转换</el-button>
            <el-button @click="Tolong()">转长连接</el-button>
        </div>
        <div style="margin-top: 50px;">
            转换后的链接 <el-input v-model="shortUrl" placeholder="请输入内容" clearable style="width: 400px;"></el-input>
             <a :href="shortUrl" target="_blank"> 访问</a>
        </div>
    </div>
</template>

<script>
import {shortApi,logApi} from '../../api/api'; 
export default {
    name: 'ShortView',
    data(){
        return { 
            url:"http://",
            shortUrl: ""
        }
    },
    mounted:function () {
    },//mounted
    methods: {
        // 转短链接
        short(){
            let par = {"url":this.url}
            shortApi(par).then(
                res => {
                    let {code,msg,data} = res;
                    if (code == 200){
                        this.shortUrl = data.url;
                    }
                }
                ).catch(
                )
        },
        // 转长连接
        Tolong(){
            let par = {"url":this.shortUrl}
            logApi(par).then(
                res => {
                    let {code,msg,data} = res;
                    if (code == 200){
                        this.url = data.url;
                    }else{
                        this.$message("转换失败")
                    }
                }
                ).catch(
                )

        }


    }
}
</script>

<style scoped>

</style>
